<template>
  <div class="forget">
    <div class="field-box">
      <Field
        v-model="state.card"
        :placeholder="
          store?.state?.lang?.currentLang?.user_inputcard || '请输入学工号'
        "
        clearable
      />
      <Field
        v-model="state.name"
        :placeholder="
          store?.state?.lang?.currentLang?.user_inputname || '请输入姓名'
        "
        clearable
      />
      <Field
        :type="state.passwordFieldType"
        v-model="state.Oldpassword"
        :placeholder="
          store?.state?.lang?.currentLang?.Oldpassword || '请输入原密码'
        "
        clearable
      />
      <Field
        :type="state.passwordFieldType"
        v-model="state.password"
        :placeholder="
          store?.state?.lang?.currentLang?.user_inputnewpassword ||
          '请输入新密码'
        "
        clearable
        :error-message="verifyPass(state.password)"
        :right-icon="state.appendIcon"
        @click-right-icon="togglePasswordVisibility"
      />
      <Field
        :type="state.passwordFieldType"
        v-model="state.repassword"
        :placeholder="
          store?.state?.lang?.currentLang?.user_pconfordpassword ||
          '请确认新密码'
        "
        clearable
        :error-message="verifyPass(state.repassword)"
        :right-icon="state.appendIcon"
        @click-right-icon="togglePasswordVisibility"
      />
    </div>

    <van-button
      @click="onSubmit"
      style="margin-top: 20px"
      type="primary"
      round
      >{{ store?.state?.lang?.lang == "zh" ? "确认" : "Confirm" }}</van-button
    >
  </div>
</template>
<script setup>
import { ref, reactive } from "vue";
import { useStore } from "vuex";
import { useRouter } from "vue-router";
import { Toast } from "vant";
import { resetPass } from "@/httpAction/login";
import Field from "@/components/Field.vue";
const router = useRouter();
const store = useStore();
const state = reactive({
  card: "", // 学号
  name: "", // 用户名
  password: "", // 密码
  repassword: "",
  Oldpassword: "", // 密码
  passwordFieldType: "password",
  appendIcon: "eye",
});

const togglePasswordVisibility = () => {
  state.passwordFieldType =
    state.passwordFieldType === "password" ? "text" : "password";
  state.appendIcon = state.passwordFieldType === "password" ? "eye" : "eye-o";
};
const onSubmit = async () => {
  let { card, name, mobile, password, repassword, Oldpassword } = state;
  if (!card) {
    Toast("请输入学工号");
    return false;
  } else if (!name) {
    Toast("请输入姓名");
    return false;
  } else if (!Oldpassword) {
    Toast("请输入原密码");
    return false;
  } else if (!password) {
    Toast("请输入修改的密码");
    return false;
  } else if (!repassword) {
    Toast("请再次输入修改的密码");
    return false;
  }

  if (password != repassword) {
    Toast("请输入相同修改后的密码");
    return false;
  }

  if (verifyPass(state.password) || verifyPass(state.repassword)) {
    Toast("请输入正确的密码格式");
    return false;
  }
  updatePassword();
};
const updatePassword = async () => {
  try {
    let { card, name, password, repassword, Oldpassword } = state;
    let params = {
      card,
      name,
      password,
      repassword,
      Oldpassword,
    };
    const res = await resetPass(params);
    if (res.code != 1) {
      Toast(res.msg);
      return false;
    }
    Toast(res.msg);
    setTimeout(() => {
      router.go(-1);
    }, 500);
  } catch (e) {
    console.log(e);
  }
};

const verifyPass = (pass) => {
  let isNext = validatePassword(pass);
  if (pass && !isNext) {
    return (
      store?.state?.lang?.currentLang?.PasswordPrompt ||
      "密码必须包含大小写、数字、字母、特殊字符，长度8-12位。"
    );
  }
  return false;
};

const validatePassword = (password) => {
  const regex =
    /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[!@#$%^&*()\-_=+[{\]};:'",<.>/?]).{8,12}$/;
  return regex.test(password);
};
</script>

<style lang="scss" scoped>
.forget {
  box-sizing: border-box;
  padding: 30px 22px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  background-color: #f7f7f7;
  .logo {
    width: 70px;
    height: 70px;
    border-radius: 10px;
    margin: 50px auto;
    > img {
      width: 100%;
      height: 100%;
    }
  }
  .field-box {
    .doubt {
      display: flex;
      align-items: center;
      font-size: 12px;
      color: var(--van-primary-color);
      > img {
        width: 14px;
        height: 14px;
        margin-right: 5px;
      }
    }
  }
  .forget {
    margin-top: 15px;
    font-size: 15px;
    font-weight: 400;
    color: #666;
    text-align: center;
  }
}
</style>
